import React from 'react';
import { cx } from 'emotion';

import { icons } from '../share';

import styles from './component.module.less';

type MenuDropDownProps = {
  active?: boolean;
} & React.HTMLAttributes<HTMLSpanElement>;

export const DropDown: React.FC<MenuDropDownProps> = ({ active, ...props }) => {
  return (
    <span {...props} className={cx(styles.menuIcon, active ? styles.active : '')}>
      <button type="button" className={cx(styles.icon, styles.dropdown)}>
        {icons.dropdown()}
      </button>
    </span>
  );
};
